<template>
    <a-input type="text" v-model:value="inputModelValue">
        <template #prefix>
            <slot name="prefix"></slot>
        </template>
        <template #suffix>
            <slot name="suffix"></slot>
        </template>
    </a-input>
</template>
<script setup>
import { ref, watch } from 'vue';

// 默认值显示用参数
const inputModelValue = ref();

const props = defineProps({
    // 默认参数值 注意传参的默认值为 modelValue
    modelValue: [Number, String],
});

const emit = defineEmits([
    // 为更新事件命名
    'update:modelValue'
]);

// 父级改变时，修改本组件中变量的值
watch(() => props.modelValue, val => {
    inputModelValue.value = val;
    // 加上这个参数，在初始化的时候进行一次传参相应
}, { immediate: true });

// 本组件中变量改变时，通知父级组件进行更新
watch(inputModelValue, (val) => {
    emit('update:modelValue', val);
})


</script>
<style lang="less" scoped>

</style>